<script setup>
import {ref,onMounted} from 'vue'
import * as echarts from 'echarts'   //引入echarts核发模块
const chart =ref();
onMounted(()=>{
    chartInit()
})
function chartInit(){
    // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(chart.value);

      // 指定图表的配置项和数据
      var option = {
          tooltip: {   //提示框组件
            trigger: 'item'
          },
          legend: {   //图例
            top: '5%',
            right: '10',
            orient:'vertical',
            textStyle:{   //图例文字的颜色
              color: '#fff'
            }
          },
          series: [
            {
              name: '行业分类',
              type: 'pie',
              radius: ['40%', '70%'],
              avoidLabelOverlap: false,
              label: {
                show: true,
                formatter:'{d}%',
                position: 'inside',
                color:'#fff'
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: 14,
                  fontWeight: 'bold'
                }
              },
              labelLine: {
                show: false
              },
              data: [
                { value: 1048, name: '行业一' },
                { value: 735, name: '行业二' },
                { value: 580, name: '行业三' }
              ]
            }
          ]
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
}
</script>

<template>
<!-- 图表的展示：三步
1、一个容器
2、初始化
3、渲染 -->
<div class="boxstyle" style="height: 230px">
  <div class="title">行业分类</div>
  <div ref="chart" style="width: 100%;height:230px;"></div>
</div>
</template>
<style scoped>

</style>